@import '../lib/var'

.sidebar
  position: fixed
  width: 38.2%
  height: 100%
  background: #f0f4f7
  text-align: center
  color: #32536a
  display: flex
  flex-direction: column
  .logo-container
    display: flex
    flex-direction: column
    justify-content: center
    font-size: 24px
    margin-bottom: 2em
    .logo
      width: 120px
      height: 120px
      border-radius: 50%
      margin: 2em auto
  .menu
    flex: 1
    a
      display: block
      line-height: 48px
      color: #32536a
      font-size: 1.85rem
      background: transparent
      transition: all 0.3s
      &:hover
        background: #dfe5eb
  .footer
    margin: 1.75em 0 2em
    font-size: 1.2rem
    color: #808080
  @media (max-width: 900px)
    position: relative
    width: 100%
    flex-direction: row
    .logo-container
      margin-bottom: 0
      .logo
        max-width: 50px
        max-height: 50px
        margin: 0.5em 0.5em
      h1
        display: none
    .menu
      display: flex
      align-items: center
      flex-direction: row-reverse
      padding-right: 0.5em
      ul
        display: flex
        a
          padding: 0.5em 1em
          line-height: 1.85rem
    .footer
      display: none
    
